<template>
  <page-header-one :scrollTop="scrollTop" :menuCheck="2"></page-header-one>

  <div class="banner flex-center flex-align-items-center">
    <img src="@/assets/bg-teach.png">
    <div class="flex-between flex-column">
      <p class="font-36-B">Hi,你好</p>
      <p class="font-36-B">我们能帮你什么吗?</p>
    </div>
  </div>

  <div class="menu flex-center">
    <div class="menu-main flex-between">
      <div v-for="(item, index) in menuList" :key="index" class="menu-item flex flex-column pointer">
        <img :src="item.img">
        <div class="menu-item-name flex flex-align-items-center">
          <i class="iconfont" :class="item.icon"></i>
          <span class="font-24-B">{{ item.name }}</span>
        </div>
        <div class="menu-item-children">
          <p v-for="child in item.children" :key="child.id" class="font-14-B"
            @click="toPath(`/teachDetail?id=${child.id}`)">{{ child.name }}</p>
        </div>
        <div class="clear">
          <p class="menu-item-more fr flex flex-align-items-center"
            @click="toPath(`/teachDetail?id=${item.children[0].id}`)">
            <span class="font-16">查看更多</span>
            <i class="iconfont icon-youjiantou"></i>
          </p>
        </div>
      </div>
    </div>
  </div>

  <div class="hot">
    <div class="hot-title flex flex-align-items-center">
      <i class="iconfont icon-remen"></i>
      <span class="font-20-B">热门问题</span>
    </div>

    <div class="problem-list flex-between flex-wrap">
      <div v-for="item in hotProblemList" :key="item.id" class="problem-item pointer"
        @click="toPath(`/teachDetail?id=${item.id}`)">
        <p class="problem-item-name font-16-B">{{ item.name }}</p>
        <p class="problem-item-desc font-14">{{ item.desc }}</p>
      </div>
    </div>
  </div>

  <div class="kefu-fixed flex-center flex-align-items-center pointer">
    <i class="iconfont icon-kefu2"></i>
  </div>

  <page-footer-one></page-footer-one>
</template>

<script setup>
import PageHeaderOne from '@/components/pageHeaderOne.vue';
import PageFooterOne from '@/components/pageFooterOne.vue';
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

const scrollTop = ref(0);
const menuList = ref([
  {
    name: '基础问题',
    img: require('../../assets/img-teach-menu-1.jpg'),
    icon: 'icon-wentifankui',
    children: [
      {
        id: 1,
        name: 'Fatohot介绍'
      },
      {
        id: 2,
        name: '账户注册'
      }
    ]
  },
  {
    name: '红人搜索',
    img: require('../../assets/img-teach-menu-2.jpg'),
    icon: 'icon-shu',
    children: [
      {
        id: 3,
        name: '主搜索'
      },
      {
        id: 4,
        name: '顶部搜索'
      }
    ]
  },
  {
    name: '红人中心',
    img: require('../../assets/img-teach-menu-3.jpg'),
    icon: 'icon-qiandao',
    children: [
      {
        id: 5,
        name: 'AI红人检索'
      },
      {
        id: 6,
        name: '我的红人'
      },
      {
        id: 7,
        name: '红人任务'
      }
    ]
  },
  {
    name: '更新公告',
    img: require('../../assets/img-teach-menu-4.jpg'),
    icon: 'icon-gengxin1',
    children: [
      {
        id: 8,
        name: '平台更新'
      }
    ]
  }
]);
const hotProblemList = ref([
  {
    id: 1,
    name: '如何成为Fatohot会员？',
    desc: '加入Fatohot，体验超一流的网红营销平台！'
  },
  {
    id: 2,
    name: '红人搜索相关',
    desc: '搜索有问题，来看超详解！'
  },
  {
    id: 3,
    name: '如何关注红人？',
    desc: '遇到心仪的红人，一键关注不错过！'
  },
  {
    id: 4,
    name: '联系红人相关',
    desc: '想联系红人？先来看攻略吧！'
  },
  {
    id: 5,
    name: '如何新建红人任务？',
    desc: '新手不得不看的保姆级攻略！'
  },
  {
    id: 6,
    name: '怎么监控合作红人的视频效益？',
    desc: '合作效果如何？Fatohot放心监测！'
  }
]);

// 根据页面是否离开顶部，判断顶部栏样式
const pageChange = () => {
  scrollTop.value = document.documentElement.scrollTop || document.body.scrollTop;
}
const toPath = path => {
  router.push(path);
}
onMounted(() => {
  pageChange();
  window.addEventListener("scroll", pageChange, false);
});
</script>

<style lang="less" scoped>
.banner {
  height: 400px;
  position: relative;

  img {
    width: 100vw;
    height: 400px;
    object-fit: cover;
    filter: brightness(.7);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }

  div {
    width: 1200px;
    height: 120px;
    padding: 0 64px;

    p {
      color: #fff;
    }
  }
}

.menu {
  padding: 40px 0;
  background: #f7f8fb;

  .menu-main {
    width: 1200px;

    .menu-item {
      width: 282px;
      height: 368px;
      background: #fff;
      border-radius: 4px;
      box-shadow: 0 6px 6px 0 rgba(0, 0, 0, .08);
      transition: all .3s;
      overflow: hidden;

      &:hover {
        transform: translateY(-8px);
      }

      img {
        width: 100%;
        margin-bottom: 16px;
      }

      &>div {
        padding: 0 16px 0 20px;
      }

      .menu-item-name {
        margin-bottom: 22px;

        i {
          color: @main-color;
          font-size: 24px;
          margin-right: 20px;
        }
      }

      .menu-item-children {
        padding-left: 44px;
        margin-bottom: 8px;
        height: 108px;

        p {
          color: #666;
          margin-bottom: 16px;

          &:hover {
            color: @main-color;
          }
        }
      }

      .menu-item-more {
        &:hover {

          i,
          span {
            color: @main-color;
          }
        }

        span {
          color: #666;
        }

        i {
          color: #666;
          margin-left: 8px;
        }
      }
    }
  }
}

.hot {
  width: 1200px;
  height: 522px;
  margin: 0 auto;

  .hot-title {
    padding: 32px 0 70px;

    i {
      font-size: 26px;
      color: @main-color;
      margin-right: 20px;
    }
  }

  .problem-list {
    .problem-item {
      width: 384px;
      height: 140px;
      margin-bottom: 40px;
      background: #fafafa;
      border-radius: 6px;
      box-shadow: 0 6px 6px 0 rgba(0, 0, 0, .06);
      transition: all .3s;
      padding: 28px 32px 0;

      &:hover {
        transform: translateY(-8px);

        .problem-item-name {
          color: @main-color;
        }
      }

      .problem-item-name {
        color: #333;
        margin-bottom: 16px;
      }

      .problem-item-desc {
        color: #999;
      }
    }
  }
}

.kefu-fixed {
  position: fixed;
  bottom: 10%;
  right: 3%;
  width: 50px;
  height: 50px;
  background: #fff;
  border-radius: 25px;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .1);
  border: 1px solid @main-color;
  z-index: 100;
  transition: all .3s;

  &:hover {
    background-color: @main-color;

    i {
      color: #fff;
    }
  }

  i {
    font-size: 30px;
    color: @main-color;
  }
}
</style>
